// 自定义聚合功能
import './member.less';
// import {
//     age
// } from '../tools';
import store from '../../store';
import { reqStatistics } from "@api/apiDatav.js";
import router from "../../router/index";
import { debounce, throttle } from 'lodash';
// 创建一个节流函数
const throttledReqStatistics = debounce(reqStatistics, 1);

// 展示所有的设备定位坐标点
class Member {
    // 信息窗口
    infoWindow;

    // 点标记
    markerLayer;
    memberList = [];
    marker;
    markerCluster;
    // 文本标记
    labelGraph;
    labelMmr;

    // 跳转页面需要传递的userId
    detailUserId;

    markerUserId; // 点击marker点获取的userId，用来查询轨迹
    alarmId; // 告警id，传到地图页面进行告警处理

    map;
    ClusterBubbleClick;
    constructor(map, memberList, init, callback) {

        // 以下代码为基于DOMOverlay实现聚合点气泡
        function ClusterBubble(options) {
            TMap.DOMOverlay.call(this, options);
        }

        ClusterBubble.prototype = new TMap.DOMOverlay();

        ClusterBubble.prototype.onInit = function(options) {
            this.content = options.content;
            this.position = options.position;
        };

        // 销毁时需要删除监听器
        ClusterBubble.prototype.onDestroy = function() {
            this.dom.removeEventListener('click', this.onClick);
            this.removeAllListeners();
        };

        ClusterBubble.prototype.onClick = function() {
            this.emit('click');
        };

        // 创建气泡DOM元素
        ClusterBubble.prototype.createDOM = function() {
            var dom = document.createElement('div');
            dom.setAttribute('class', 'clusterbubble') //给dom添加属性
                // dom.classList.add('clusterBubble'); 
            dom.innerText = this.content;
            // 设置css
            dom.style.cssText = [
                // 'width: ' + (40 + parseInt(this.content) * 2) + 'px;',
                // 'height: ' + (40 + parseInt(this.content) * 2) + 'px;',
                // 'line-height: ' + (40 + parseInt(this.content) * 2) + 'px;',
                'width: 60px;',
                'height: 60px;',
                'line-height: 60px;',
                'border-radius: 50%;',
                'color: #fff;',
                'font-weight: 500;',
                'text-align: center;',
                'opacity: 0.88;',
                'background-image: ' + 'linear-gradient(139deg, #4294FF 0%, #295BFF 100%);',
                'box-shadow: ' + '0 1px 3px 0 rgba(0, 0, 0, 0.20);',
                'position: absolute;',
                'top: 0px;',
                'left: 0px;',
                'cursor: pointer;',
                'user-select:none;',
            ].join(' ');

            // 监听点击事件，实现zoomOnClick
            this.onClick = this.onClick.bind(this);
            dom.addEventListener('click', this.onClick);

            return dom;
        };

        ClusterBubble.prototype.updateDOM = function() {
            if (!this.map) {
                return;
            }
            // 经纬度坐标转容器像素坐标
            let pixel = this.map.projectToContainer(this.position);

            // 使文本框中心点对齐经纬度坐标点
            let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
            let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
            this.dom.style.transform = `translate(${left}, ${top})`;

            this.emit('dom_updated');
        };

        window.ClusterBubble = ClusterBubble;

        this.normalMmr = require('/src/assets/images/datav/wugaojing.png'); //建筑物无告警
        this.danwei = require('/src/assets/images/datav/danwei.png'); //单位
        this.map = map;
        this.memberList = memberList;
        this.callback = callback;
        this.mmrLabel(); // 成员头部的文本标记
        if (init) {
            // 单位操作
            this.locMarkersunit();
        } else {
            // 建筑物操作
            this.locMarkers();
        }
    }

    // 系统管理员
    locMarkersunit() {
        //创建并初始化MultiMarker
        // this.markerLayer = new TMap.MultiMarker({
        //     map: this.map, //指定地图容器
        //     id: 'markerLayer',
        //     //样式定义
        //     styles: {},
        //     //点标记数据数组
        //     geometries: [],
        // });
        // this.setMarkerStyles(); // 点标记样式
        // this.setMarkers(true); // 添加点位置信息数据
        // this.infoWindowHandle(true); //初始化信息窗口
        // return this.markerLayer;

        // 创建点聚合实例   
        this.markerCluster = new TMap.MarkerCluster({
            id: 'cluster',
            map: this.map,
            enableDefaultStyle: false, // 启用默认样式
            minimumClusterSize: 1, // 形成聚合簇的最小个数
            zoomOnClick: true, // 点击簇时放大至簇内点分离
            gridSize: 60, // 聚合算法的可聚合距离
            averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
            maxZoom: 10, // 采用聚合策略的最大缩放级别
            geometries: [], //数据组
        });
        this.setMarkers(true); // 添加点位置信息数据
        this.clusterchanged() // 监听聚合簇变化
        this.infoWindowHandle(); //初始化信息窗口
        return this.markerCluster;
    }

    // 建筑物操作
    locMarkers() {
        //创建并初始化MultiMarker
        // this.markerLayer = new TMap.MultiMarker({
        //     map: this.map, //指定地图容器
        //     id: 'markerLayer',
        //     styles: {}, //样式定义
        //     geometries: [], //点标记数据数组
        // });
        // this.setMarkerStyles(); // 点标记样式
        // this.setMarkers(); // 添加点位置信息数据
        // this.infoWindowHandle(); //初始化信息窗口
        // return this.markerLayer;

        // 创建点聚合实例   
        this.markerCluster = new TMap.MarkerCluster({
            id: 'cluster',
            map: this.map,
            enableDefaultStyle: false, // 启用默认样式
            minimumClusterSize: 1, // 形成聚合簇的最小个数
            zoomOnClick: true, // 点击簇时放大至簇内点分离
            gridSize: 60, // 聚合算法的可聚合距离
            averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
            maxZoom: 10, // 采用聚合策略的最大缩放级别
            geometries: [], //数据组
        });
        this.setMarkers(); // 添加点位置信息数据
        this.clusterchanged() // 监听聚合簇变化
        this.infoWindowHandle(); //初始化信息窗口
        return this.markerCluster;
    }

    // 切换单位
    async changePjt(memberList, init = false) {
        // flag==true 显示单位  flag==false显示建筑物

        // if (JSON.stringify(memberList) == JSON.stringify(this.memberList)) return; //切换相同的单位会出bug
        this.memberList = memberList;
        // this.memberList = [...memberList, ...this.memberList]
        await this.closeAll();

        // this.setMarkerStyles(); // 点标记样式
        // console.log(this.memberList);
        // if (this.memberList.length == 1) {
        //     this.memberList = [...this.memberList, ...memberList, ...memberList]
        // }
        // console.log(this.memberList);
        await this.setMarkers(init); // 添加点位置信息数据

        // this.listerInfo(this.flagAll); //监听标注点击事件
        // this.listerInfo(init) //监听标注点击事件
    }

    // 点标记样式
    setMarkerStyles() {
        this.markerLayer.setStyles({
            normalMmr: new TMap.MarkerStyle({
                width: 25,
                height: 33,
                anchor: {
                    x: 20,
                    y: 20,
                },
                src: this.normalMmr,
            }),
            danwei: new TMap.MarkerStyle({
                width: 25,
                height: 33,
                anchor: {
                    x: 20,
                    y: 20,
                },
                src: this.danwei,
            }),
        });
    }

    // 添加点位置
    setMarkers(flag = false) {
        this.flagAll = flag; //全局
        // flag==true 显示单位  flag==false显示建筑物
        console.log(this.memberList, 'this.memberList点位置信息');
        this.memberList.forEach(item => {
            let styleId;
            if (flag) {
                styleId = 'danwei'; // 显示单位图片
            } else {
                styleId = 'normalMmr';
            }
            // 添加点标记
            this.markerCluster.add([{
                id: item.id, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                styleId: styleId, //指定样式id
                name: item.name || '', //建筑物名称
                orgName: item.orgName || '', //单位名称
                floorCount: item.floorCount || 0, //楼层数量
                spaceCount: item.spaceCount || 0, //安装点数量
                village: item.village || '', //小区
                username: item.username || '', //责任人
                mobile: item.mobile || '', //责任人手机号
                province: item.province || '', //省
                city: item.city || '', //市
                area: item.area || '', //区
                street: item.street || '', //街道
                alarmId: item.alarmId || '',
                sex: item.gender == 0 ? '女' : '男',
                address: `${item.province}${item.city}${item.area}${item.street}`, //地址
                position: new TMap.LatLng(item.lat, item.lng),
                lat: item.lat,
                lng: item.lng,
                isAlarm: item.isAlarm, //告警==1
            }, ]);
        });
        this.clusterchanged()
    }

    // 监听聚合簇变化
    clusterchanged() {
        var clusterBubbleList = [];
        var markerGeometries = [];
        var markerGeometries2 = [];
        this.marker = null;

        // 监听聚合簇变化
        this.markerCluster.on('cluster_changed', e => {
            // 销毁旧聚合簇生成的覆盖物
            if (clusterBubbleList.length) {
                clusterBubbleList.forEach(function(item) {
                    item.destroy();
                })
                clusterBubbleList = [];
            }
            markerGeometries = [];
            markerGeometries2 = [];

            // 根据新的聚合簇数组生成新的覆盖物和点标记图层
            var clusters = this.markerCluster.getClusters();
            clusters.forEach(item => {
                // console.log(item);
                if (item.geometries.length > 1) {
                    let clusterBubble = new ClusterBubble({
                        map: this.map,
                        position: item.center,
                        content: item.geometries.length,
                    });
                    clusterBubble.on('click', () => {
                        this.map.fitBounds(item.bounds);
                    });
                    clusterBubbleList.push(clusterBubble);
                } else {
                    // console.log(item.geometries[0].isAlarm);
                    if (this.flagAll) {
                        // 单位
                        markerGeometries.push({
                            position: item.center,
                            // 点击信息窗口需用到的参数
                            id: item.geometries[0].id,
                            name: item.geometries[0].name || '', //建筑物名称
                            orgName: item.geometries[0].orgName || '', //单位名称
                            floorCount: item.geometries[0].floorCount || 0, //楼层数量
                            spaceCount: item.geometries[0].spaceCount || 0, //安装点数量
                            village: item.geometries[0].village || '', //小区
                            username: item.geometries[0].username || '', //责任人
                            mobile: item.geometries[0].mobile || '', //责任人手机号
                            province: item.geometries[0].province || '', //省
                            city: item.geometries[0].city || '', //市
                            area: item.geometries[0].area || '', //区
                            street: item.geometries[0].street || '', //街道
                            alarmId: item.geometries[0].alarmId || '',
                            sex: item.geometries[0].gender == 0 ? '女' : '男',
                            address: `${item.geometries[0].province}${item.geometries[0].city}${item.geometries[0].area}${item.geometries[0].street}`, //地址
                            lat: item.geometries[0].lat,
                            lng: item.geometries[0].lng,
                            isAlarm: item.geometries[0].isAlarm, //告警==1
                        });
                        return;
                    }
                    if (item.geometries[0].isAlarm == 0) {
                        markerGeometries.push({
                            position: item.center,
                            // 点击信息窗口需用到的参数
                            id: item.geometries[0].id,
                            name: item.geometries[0].name || '', //建筑物名称
                            orgName: item.geometries[0].orgName || '', //单位名称
                            floorCount: item.geometries[0].floorCount || 0, //楼层数量
                            spaceCount: item.geometries[0].spaceCount || 0, //安装点数量
                            village: item.geometries[0].village || '', //小区
                            username: item.geometries[0].username || '', //责任人
                            mobile: item.geometries[0].mobile || '', //责任人手机号
                            province: item.geometries[0].province || '', //省
                            city: item.geometries[0].city || '', //市
                            area: item.geometries[0].area || '', //区
                            street: item.geometries[0].street || '', //街道
                            alarmId: item.geometries[0].alarmId || '',
                            sex: item.geometries[0].gender == 0 ? '女' : '男',
                            address: `${item.geometries[0].province}${item.geometries[0].city}${item.geometries[0].area}${item.geometries[0].street}`, //地址
                            lat: item.geometries[0].lat,
                            lng: item.geometries[0].lng,
                            isAlarm: item.geometries[0].isAlarm, //告警==1
                        });
                    } else {
                        markerGeometries2.push({
                            position: item.center,
                            // 点击信息窗口需用到的参数
                            id: item.geometries[0].id,
                            name: item.geometries[0].name || '', //建筑物名称
                            orgName: item.geometries[0].orgName || '', //单位名称
                            floorCount: item.geometries[0].floorCount || 0, //楼层数量
                            spaceCount: item.geometries[0].spaceCount || 0, //安装点数量
                            village: item.geometries[0].village || '', //小区
                            username: item.geometries[0].username || '', //责任人
                            mobile: item.geometries[0].mobile || '', //责任人手机号
                            province: item.geometries[0].province || '', //省
                            city: item.geometries[0].city || '', //市
                            area: item.geometries[0].area || '', //区
                            street: item.geometries[0].street || '', //街道
                            alarmId: item.geometries[0].alarmId || '',
                            sex: item.geometries[0].gender == 0 ? '女' : '男',
                            address: `${item.geometries[0].province}${item.geometries[0].city}${item.geometries[0].area}${item.geometries[0].street}`, //地址
                            lat: item.geometries[0].lat,
                            lng: item.geometries[0].lng,
                            isAlarm: item.geometries[0].isAlarm, //告警==1
                        });
                    }

                }
            });

            if (markerGeometries.length != 0) {

                if (this.marker) {
                    // 已创建过点标记图层，直接更新数据
                    this.marker.setGeometries(markerGeometries);
                } else {
                    // console.log(markerGeometries);
                    // 创建点标记图层
                    this.marker = new TMap.MultiMarker({
                        map: this.map,
                        id: 'marker',
                        styles: {
                            // 设置样式id=myStyle
                            default: new TMap.MarkerStyle({
                                width: 25,
                                height: 33,
                                anchor: {
                                    x: 20,
                                    y: 20,
                                },
                                "src": this.flagAll ? require('/src/assets/images/datav/danwei.png') : require('/src/assets/images/datav/wugaojing.png'), //单位||建筑物
                            }),
                        },
                        geometries: markerGeometries
                    });
                }
            }

            if (markerGeometries2.length != 0 && !this.flagAll) {
                if (this.marker2) {
                    // 已创建过点标记图层，直接更新数据
                    this.marker2.setGeometries(markerGeometries2);
                } else {
                    // 创建点标记图层
                    this.marker2 = new TMap.MultiMarker({
                        map: this.map,
                        id: 'marker2',
                        styles: {
                            // 设置样式id=myStyle
                            default: new TMap.MarkerStyle({
                                width: 25,
                                height: 33,
                                anchor: {
                                    x: 20,
                                    y: 20,
                                },
                                "src": require('/src/assets/images/datav/buildingAlarm.png')
                            }),
                        },
                        geometries: markerGeometries2
                    });
                }
            }

            // this.getmarker()

            this.listerInfo(this.flagAll); //监听标注点击事件
        });
    }



    infoWindowHandle(init = false) {
        //初始化infoWindow
        this.infoWindow = new TMap.InfoWindow({
            map: this.map,
            enableCustom: true,
            position: new TMap.LatLng(39.984104, 116.307503),
            offset: {
                x: 0,
                y: -25
            }, //设置信息窗相对position偏移像素background-image: linear-gradient(to bottom, #23e3ac, #09afe6)
            content: '<div class="infoWindow"></div>',
        });
        this.infoWindow.close(); //初始关闭信息窗关闭

    }

    //监听标注点击事件
    listerInfo(init = false) {
        // 移动地图变爪子
        this.map.on('drag', evt => {
            store.commit('saveCursor', 'grabbing');
        });
        this.map.on('dragend', evt => {
            store.commit('saveCursor', 'grab');
        });

        if (this.marker != null) {
            this.marker.on('click', debounce(async evt => {
                console.log(evt);
                // console.log(evt.geometry.styleId);
                if (init) {
                    // console.log(init, '单位点击事件');
                    this.callback(evt.geometry);
                    // this.showUnit.bind(this, this.infoWindow)
                    // window.document
                    // .getElementById("track")
                    // .addEventListener("click", this.showUnit.bind(this, this.infoWindow));
                } else {
                    // console.log(evt.geometry, '建筑物点击事件');
                    store.commit('savebuildingsArr', evt.geometry); //存储建筑物详情
                    // let res = await reqStatistics(evt.geometry.id);
                    // 使用节流函数调用reqStatistics
                    let res = await throttledReqStatistics(evt.geometry.id);
                    // console.log(res);
                    this.markerUserId = this.detailUserId = evt.geometry.id;
                    this.alarmId = evt.geometry.alarmId;
                    let markerInfo = this.marker.getGeometryById(evt.geometry.id);
                    //设置infoWindow
                    this.infoWindow.setPosition(evt.geometry.position); //设置信息窗位置
                    // <div class="warnImg"></div>
                    // <div class="warnType">门被打开</div>
                    // <div class="date">2022-12-16 17:01:20</div>
                    // <div><span>小区：</span>${evt.geometry.village}</div>

                    this.infoWindow.setContent(
                        `<div class="infoWindow">
                        <p class="closeImg" id="close"></p>
                        <div class='div_box'>
                            <div style='font-size: 18px;margin:9px 0;'>${evt.geometry.name}</div>
                            <div><span>单位：</span>${res.data.row.orgName}</div>
                            <div><span>楼层数量：</span>${res.data.row.floorCount}</div>
                            <div><span>安装点数量：</span>${res.data.row.spaceCount}</div>
                            <div><span>设备数量：</span>${res.data.row.deviceCount}</div>
                            <div style='width: 250px;'><span>地址：</span>${evt.geometry.address}</div>
                            <div style='width: 250px;text-align: right;cursor: pointer;' id="datavDetail">建筑物详情 <i class="el-icon-d-arrow-right"></i></div>
                        </div>
                        </div>`
                    ); //设置信息窗内容
                    this.infoWindow.open(); //打开信息窗
                    window.document
                        .getElementById('close')
                        .addEventListener('click', this.onCloseInfo.bind(this, this.infoWindow));
                    window.document
                        .getElementById('datavDetail')
                        .addEventListener('click', this.onDatavDetail.bind(this, this.infoWindow));
                }
            }, 500));

            this.marker.on('hover', evt => {
                store.commit('saveCursor', 'grab'); // 鼠标移出恢复
            });
            this.marker.on('mousemove', async evt => {
                if (store.state.cursor != 'pointer') {
                    store.commit('saveCursor', 'pointer'); // 鼠标移入变手
                }
                // 单位移入显示单位名称
                if (init) {
                    this.setPeopleLable2(evt.geometry, true); //更新头部文本标记
                }
            });

            // 移出
            this.marker.on('mouseout', evt => {
                // this.infoWindow.close(); //移出隐藏弹窗
                // console.log(evt.geometry);
                this.labelMmr.setGeometries([]); //清空头部文本标记
            });
        }


        if (init) return;
        this.marker2.on('hover', evt => {
            store.commit('saveCursor', 'grab'); // 鼠标移出恢复
        });
        this.marker2.on('mousemove', async evt => {
            if (store.state.cursor != 'pointer') {
                store.commit('saveCursor', 'pointer'); // 鼠标移入变手
            }
        });
        this.marker2.on('click', async evt => {
            console.log(evt);
            // console.log(evt.geometry.styleId);
            if (init) {
                this.callback(evt.geometry);
            } else {
                store.commit('savebuildingsArr', evt.geometry); //存储建筑物详情
                // let res = await reqStatistics(evt.geometry.id);
                // 使用节流函数调用reqStatistics
                let res = await throttledReqStatistics(evt.geometry.id);
                // console.log(res);
                this.markerUserId = this.detailUserId = evt.geometry.id;
                this.alarmId = evt.geometry.alarmId;
                let markerInfo = this.marker.getGeometryById(evt.geometry.id);
                //设置infoWindow
                this.infoWindow.setPosition(evt.geometry.position); //设置信息窗位置
                // <div><span>小区：</span>${evt.geometry.village}</div>

                this.infoWindow.setContent(
                    `<div class="infoWindow">
                        <p class="closeImg" id="close"></p>
                        <div class='div_box'>
                            <div style='font-size: 18px;margin:9px 0;'>${evt.geometry.name}</div>
                            <div><span>单位：</span>${res.data.row.orgName}</div>
                            <div><span>楼层数量：</span>${res.data.row.floorCount}</div>
                            <div><span>安装点数量：</span>${res.data.row.spaceCount}</div>
                            <div><span>设备数量：</span>${res.data.row.deviceCount}</div>
                            <div style='width: 250px;'><span>地址：</span>${evt.geometry.address}</div>
                            <div style='width: 250px;text-align: right;cursor: pointer;' id="datavDetail">建筑物详情 <i class="el-icon-d-arrow-right"></i></div>
                        </div>
                        </div>`
                ); //设置信息窗内容
                this.infoWindow.open(); //打开信息窗
                window.document
                    .getElementById('close')
                    .addEventListener('click', this.onCloseInfo.bind(this, this.infoWindow));
                window.document
                    .getElementById('datavDetail')
                    .addEventListener('click', this.onDatavDetail.bind(this, this.infoWindow));
            }
        });

    }

    // showUnit() {
    //     this.infoWindow.close();
    //     this.callback(this.infoWindow);
    // }

    onCloseInfo() {
        // this.markerUserId = '';
        this.infoWindow.close(); //关闭信息窗关闭
        // window.document.getElementById('close').removeEventListener('click', this.closeInfo)
    }

    onDatavDetail() {
        router.push("/building/details"); //跳转至建筑物详情
        // console.log(store.state.datav.buildingsFlag);
        //不加会导致第一次监听不到，不调接口
        // setTimeout(() => {
        //     store.commit('savebuildingsFlag', !store.state.datav.buildingsFlag); //存储建筑物详情
        // }, 300)
    }

    // 成员头部的文本标记
    mmrLabel() {
        let _this = this;
        _this.labelMmr = new TMap.MultiLabel({
            id: 'label-mmr',
            map: _this.map, //设置折线图层显示到哪个地图实例中
            //文字标记样式
            styles: {
                noWarnPeople: new TMap.LabelStyle({
                    color: '#000', //颜色属性
                    backgroundColor: '#09E2F8',
                    borderColor: '#FFF',
                    borderRadius: 5,
                    borderWidth: 1,
                    padding: '4px 25px',
                    size: 13, //文字大小属性
                    offset: {
                        x: -6,
                        y: -38
                    }, //文字偏移属性单位为像素
                    angle: 0, //文字旋转属性
                    alignment: 'center', //文字水平对齐属性
                    verticalAlignment: 'middle', //文字垂直对齐属性
                }),
                warnPeople: new TMap.LabelStyle({
                    color: '#F15252', //颜色属性
                    // backgroundColor: '#d81e06',
                    // borderColor: '#333333',
                    // borderRadius: 5,
                    // borderWidth: 1,
                    padding: '4px 25px',
                    size: 14, //文字大小属性
                    offset: {
                        x: -3,
                        y: -30
                    }, //文字偏移属性单位为像素
                    angle: 0, //文字旋转属性
                    alignment: 'center', //文字水平对齐属性
                    verticalAlignment: 'middle', //文字垂直对齐属性
                }),
            },
            //文字标记数据
            geometries: [],
        });
        // this.setPeopleLable(this.memberList);  // 显示文本标记
    }

    // 更新文本标记
    setPeopleLable2(labelData) {
        // console.log(labelData, 'labelData头部文本标记');
        let _this = this;
        let centerCoords = [];
        if (
            (_this.labelMmr &&
                _this.labelMmr.getGeometries() &&
                _this.labelMmr.getGeometries().length) ||
            ''
        ) {
            _this.labelMmr.setGeometries([]);
        }

        let labelColor;
        labelColor = 'noWarnPeople';
        centerCoords.push({
            id: labelData.id,
            styleId: labelColor,
            position: new TMap.LatLng(labelData.position.lat, labelData.position.lng),
            content: labelData.orgName
        });
        _this.labelMmr.updateGeometries(centerCoords);
    }

    closeAll() {
        this.labelMmr.setGeometries([]); //清空头部文本标记
        this.infoWindow.close(); //初始关闭信息窗关闭


        if (this.marker != null) {
            this.marker.setGeometries([]) //清空点标记
            this.marker.destroy() //清空点标记
        }

        if (this.marker2 != null) {
            this.marker2.setGeometries([]) //清空点标记
            this.marker2.destroy() //清空点标记
        }
        this.markerCluster.setGeometries([]); //清空点标记


        // 清空点标记 删除dom元素 气泡
        let doms = document.getElementsByClassName('clusterbubble')
        let l = doms.length
        for (let i = l - 1; i >= 0; i--) {
            if (doms[i] != null) {
                doms[i].remove();
            }
        }

        // this.markerCluster.setMap(null); //清空点标记
        // this.markerCluster.destroy(); //清空点标记
    }

    memberFilter(arr) {
        arr.forEach(item => {
            this.memberList.push(new TMap.LatLng(item.lat, item.lon));
        });
    }

    // getmarker() {
    //     this.marker = new TMap.MultiMarker({
    //         map: this.map, //指定地图容器
    //         id: 'marker',
    //         //样式定义
    //         styles: {},
    //         //点标记数据数组
    //         geometries: [],
    //     });
    //     // this.setMarkerStyles2();
    //     this.setMarkers2();
    //     this.listerInfo(this.flagAll); //监听标注点击事件
    //     return this.marker;
    // }
    // setMarkerStyles2() {
    //     this.marker.setStyles({
    //         normalMmr: new TMap.MarkerStyle({
    //             width: 33,
    //             height: 46,
    //             anchor: {
    //                 x: 20,
    //                 y: 20,
    //             },
    //             src: this.normalMmr,
    //         }),
    //         danwei: new TMap.MarkerStyle({
    //             width: 25,
    //             height: 33,
    //             anchor: {
    //                 x: 20,
    //                 y: 20,
    //             },
    //             src: this.danwei,
    //         }),
    //         // default: new TMap.MarkerStyle({
    //         //     width: 25,
    //         //     height: 33,
    //         //     anchor: {
    //         //         x: 20,
    //         //         y: 20,
    //         //     },
    //         //     "src": require('/src/assets/images/datav/danwei.png')
    //         // }),
    //     });
    // }
    // setMarkers2() {
    //     console.log(this.memberList, 'this.memberList');
    //     this.memberList.forEach(item => {
    //         console.log(item);
    //         let styleId;
    //         styleId = 'danwei'; // 显示单位图片
    //         // 添加点标记
    //         this.marker.add([{
    //             id: item.id, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
    //             styleId: 'normalMmr', //指定样式id
    //             rank: 2,
    //             name: item.name || '', //建筑物名称
    //             orgName: item.orgName || '', //单位名称
    //             floorCount: item.floorCount || 0, //楼层数量
    //             spaceCount: item.spaceCount || 0, //安装点数量
    //             village: item.village || '', //小区
    //             username: item.username || '', //责任人
    //             mobile: item.mobile || '', //责任人手机号
    //             province: item.province || '', //省
    //             city: item.city || '', //市
    //             area: item.area || '', //区
    //             street: item.street || '', //街道
    //             alarmId: item.alarmId || '',
    //             sex: item.gender == 0 ? '女' : '男',
    //             address: `${item.province}${item.city}${item.area}${item.street}`, //地址
    //             position: new TMap.LatLng(item.lat, item.lng),
    //             lat: item.lat,
    //             lng: item.lng,
    //             isAlarm: item.isAlarm, //告警==1
    //         }, ]);
    //     });
    // }

}

export default Member;